 @charset "utf-8";
@import "reset";
@mixin bgg($width,$height){
    width: $width/2;
    height: $height/2;
}
@mixin img(){
    width:100%;
    height: 100%;
}

@function px($px){
    @return ($px/2);
}
$fontsize:20;
@function r($px){
    @return $px/(2*$fontsize) * 1rem;
} 
html,body{
            width: 100%;
            height: 100%;
        }
        #web{
            width: 100%;
            height: 100%;
            position: relative;
        }
        header{
            width: 94%;
            height: r(57);
            background: white;
            position: absolute;
            margin-top: r(48);
            top: 0;
            left: 0;
            div{
                vertical-align: middle;
            }
            .logo{
                float: left;
                width: 16.4%;
                 height: r(57);
                 margin-left: r(23);
                 border: 1px solid #ff9344;
                 border-radius: 12px;
                 text-align: center;
                a{
                     display: block;
                    @include img();
                    font-size: r(26);
                    border-radius: 8px;
                    line-height: r(57);
                    border: none;
                    color: #000000;
                    background: transparent;
                }
            }
            .message{
                float: right;
                width: r(61);
                height: r(41);
                position: relative;
                div:nth-child(1){
                     width: r(61);
                     height: r(41);
                    // overflow: hidden;
                     img{
                         width: 100%;
                     }
                }
                div:nth-child(2){
                     width: r(28);
                     height: r(28);
                     border-radius:50% ;
                     overflow: hidden;
                     position: absolute;
                     right: 0;
                     top:r(-16);
                    img{
                        width: r(28);
                        //height: px(28px);
                        vertical-align: top;
                    }
                }
            }
           p{
               text-align: center;
               font-size: r(26);
               color: #000;
               line-height: r(57);
           }
        }    
         section{
            width: 100%;
            position:absolute;
            top: r(150);
            bottom: r(136);
            overflow-y: scroll;
            .user{
                width:r(726);
                margin-left: r(23);
                .userimg{
                        width: r(170);
                        height: r(170);
                        border-radius: 50%;
                        overflow: hidden;
                        img{
                            width: 100%;
                        }
                 }
                 .userinfo{
                     width: r(556);
                      height: r(170);
                     h5{
                         font-size: r(30);
                         line-height: r(66);
                         padding-top:r(16) ;
                         padding-left: r(24);
                     }
                     p{
                         font-size: r(26);
                         color: #9d9d9d;
                         padding-top: r(18);
                         padding-left: r(24);
                     }
                     a{
                         width: r(41);
                         height: r(46);
                         overflow: hidden;
                         margin-top: r(60);
                         margin-right: r(20);
                         vertical-align: middle;
                         img{
                             width: 100%;
                         }
                     }
                 }
             }
             .titleul{
                 width:r(726);
                 margin-left: r(23);
                 margin-top: r(26);
                 li{
                     float: left;
                     width: r(195);
                     height: r(151);
                     text-align: center;
                     a{
                         display: inline-block;
                         font-size: r(26);
                         margin-top: r(110);
                         color: #000;
                     }
                     &:nth-child(1){
                         background: url(../img/myself/bg1.jpg) no-repeat;
                         background-size:r(195) r(151); 
                         margin-right: r(60);
                     }
                     &:nth-child(2){
                         background: url(../img/myself/bg2.jpg) no-repeat;
                         background-size:r(195) r(151); 
                         margin-right: r(59);
                     }
                     &:nth-child(3){
                         background: url(../img/myself/bg3.jpg) no-repeat;
                        background-size:r(195) r(151); 
                     }
                 }
             }
             .title{
                    width: 100%;
                    margin-top: r(34);
                    p:nth-of-type(1){
                        margin-left: r(21);
                        img{
                           // @include bgg(56px,54px);
                            width: r(56);
                            height: r(54);
                        }
                        span{
                            font-size: r(30);
                            color: #000;
                            line-height: r(54);
                            vertical-align:top;
                        }
                    }
                     p:nth-of-type(2){
                         margin-right: r(21);
                        a{
                            color: #000;
                            font-size: r(24);
                            line-height: r(54);
                            i{
                                color: #ff9344;
                                position: relative;
                                top: r(2);
                            }
                        }
                    }
                    &:last-child{
                        margin-top: r(24);
                        margin-bottom: r(12);
                    }
                    input{
                        width: r(146);
                        height: r(75);
                        font-size: r(24);
                        color: #FFFFFF;
                        background: #ff9344;
                        border-radius: r(30);
                        text-align: center;
                        border: 0;
                         appearance: none;
                        -webkit-appearance:none;
                        -moz-appearance:none;
                        &:first-child{
                            margin-left: r(86);
                        }
                         &:nth-child(2){
                            margin-left: r(246);
                        }
                    }
                }
        }
        footer{
            width: 100%;
            height:r(136);
            background: white;
            position: absolute;
            bottom: 0;
            left: 0;
            ul li{
                width: 25%;
                height: 100%;
                float: left;
                text-align: center;
                .iconfont{
                    color: transparent;
                    font-size: r(60);
                    -webkit-text-stroke: 1px #ff9344;
                }
                &.active .iconfont{
                    color: #ff9344;
                }
                &:hover .iconfont{
                    color: #ff9344;
                }
            }
            a{
                color: #000;
                
            }
        }
